<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>网格案例</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .outer {
            height: 600px;
            background-color: skyblue;
            display: grid;
            grid-template-columns: repeat(13, 100px);
            grid-template-rows: repeat(4, 100px);
            /*控制表格的对齐方式也是写在grid里面*/
            justify-content: center;
            align-content: center;
            grid-gap: 5px;

        }

        .box {
            background-color: #EA866D;
            text-align: center;
            color: white;
            font-size: 20px;
            display: flex;
        }

        .box > span {
            margin: auto;
        }
        /*有距离就成子代选择器了，后面直接带.就是交集选择器，不要有空格*/
        .box.box-row1.boxc10 {
           grid-column-start: 10;
           grid-column-end: 12;
        }
        .box.box-row1.boxc12 {
            grid-column: 12/14;
            grid-row: 1/3;
        }
        .box.box-row2.boxc1 {
            grid-column: 1/3;
        }
        .box.box-row2.boxc6 {
            grid-column: 6/9;
            grid-row: 2/4;
        }

        .box.box-row3.boxc1 {
            grid-column: 1/3;
            grid-row: 3/5;
        }
        .box.box-row4.boxc12 {
            grid-column: 12/14;
        }
    </style>
</head>

<body>
<img src="./案例.png" width="500px">

<hr>
<br>
<div class="outer">
    <!--    第一行-->
    <div class="box box-row1 boxc1"><span>CCTV-1综合</span></div>
    <div class="box box-row1 boxc2"><span>CCTV-2财经</span></div>
    <div class="box box-row1 boxc3"><span>3</span></div>
    <div class="box box-row1 boxc4"><span>CCTV-5体育</span></div>
    <div class="box box-row1 boxc5"><span>5</span> </div>
    <div class="box box-row1 boxc6"><span>6</span> </div>
    <div class="box box-row1 boxc7"><span>7</span> </div>
    <div class="box box-row1 boxc8"><span>8</span> </div>
    <div class="box box-row1 boxc9"><span>9</span> </div>
    <div class="box box-row1 boxc10"><span>总台之声</span></div>
    <div class="box box-row1 boxc12"><span>收视榜</span></div>


    <!--    第二行-->
    <div class="box box-row2 boxc1 "><span>和平之舟</span></div>
    <div class="box box-row2 boxc3 "><span>3</span></div>
    <div class="box box-row2 boxc4 "><span>4</span></div>
    <div class="box box-row2 boxc5 "><span>5</span></div>
    <div class="box box-row2 boxc6 "><span>《体育新闻》CBA男篮豪取八连胜</span></div>
    <div class="box box-row2 boxc9 "><span>9</span></div>
    <div class="box box-row2 boxc10 "><span>10</span></div>
    <div class="box box-row2 boxc11 "><span>11</span></div>


    <!--    第三行-->
    <div class="box box-row3 boxc1 "><span>4K专区</span></div>
    <div class="box box-row3 boxc3 "><span>3</span></div>
    <div class="box box-row3 boxc4 "><span>4</span></div>
    <div class="box box-row3 boxc5 "><span>5</span></div>
    <div class="box box-row3 boxc9 "><span>9</span></div>
    <div class="box box-row3 boxc10 "><span>10</span></div>
    <div class="box box-row3 boxc11 "><span>11</span></div>
    <div class="box box-row3 boxc12 "><span>12</span></div>
    <div class="box box-row3 boxc13 "><span>13</span></div>

    <!--    第四行-->
    <div class="box box-row4 boxc3 "><span>3</span></div>
    <div class="box box-row4 boxc4 "><span>CCTV-5体育</span></div>
    <div class="box box-row4 boxc5 "><span>5</span></div>
    <div class="box box-row4 boxc6 "><span>6</span></div>
    <div class="box box-row4 boxc7 "><span>7</span></div>
    <div class="box box-row4 boxc8 "><span>8</span></div>
    <div class="box box-row4 boxc9 "><span>9</span></div>
    <div class="box box-row4 boxc10 "><span>10</span></div>
    <div class="box box-row4 boxc11 "><span>11</span></div>
    <div class="box box-row4 boxc12 "><span>看直播</span></div>
</div>


</body>

</html>